.sx__today-button {
  padding: var(--sx-spacing-padding3) var(--sx-spacing-padding4);
  border-radius: var(--sx-rounding-extra-small);
  font-size: var(--sx-calendar-header-input-font-size);
  color: var(--sx-internal-color-text);

  &:active {
    background-color: var(--sx-internal-color-gray-ripple-background);
  }

  .sx__is-calendar-small & {
    display: none;
  }

  .sx__calendar-header & {
    border: var(--sx-border);
  }

  &:hover,
  &:focus {
    background-color: var(--sx-internal-color-light-gray);

    .is-dark & {
      background-color: var(--sx-color-surface-container-low);
    }
  }
}
